<template>
  <div id="PlaylistDetail">
    <div class="content">
      <div class="title">
        <!--   歌单图片    -->
        <div class="title_imgbox">
          <el-image :src="`${albumInfo.picUrl}?param=200y200`" style="width: 200px; height: 200px"/>
        </div>
        <!--   歌单名和介绍     -->
        <div class="title_info">
          <h3>{{ albumInfo.name }}</h3>
          <div class="creator" v-if="albumInfo.artist">
            <span ref="artname">歌手：
              <a v-for="(artist,index) in albumInfo.artists" :key="artist.id" @click="toArtist(artist.id,artist.name)">
                <span v-if="index>0">/</span>{{ artist.name }}</a>
            </span>
            <span>发行时间：{{ listCreateTime }}</span>
            <span v-if="albumInfo.company">发行公司：{{ albumInfo.company }}</span>
          </div>
          <div style="display: flex" v-if="albumInfo.info">
            <el-button type="primary" icon="el-icon-video-play" size="small" @click="changeMusiclist">播放</el-button>
            <el-button icon="el-icon-folder-add" size="small">收藏</el-button>
            <el-button icon="el-icon-share" size="small">({{ albumInfo.info.shareCount }})</el-button>
            <el-button icon="el-icon-download" size="small"></el-button>
            <el-button icon="el-icon-chat-line-square" size="small">({{ albumInfo.info.commentCount }})</el-button>
          </div>
          <div class="dept">
            <span>介绍：</span>
            <template>
              <p v-for="(d,index) in description" :key="d+index">
                <template v-if="index<num">
                  {{ d }}
                </template>
              </p>
            </template>
          </div>
          <div v-if="description.length > 3">
            <el-button type="text" @click.native="num=99" v-if="num===2">展开</el-button>
            <el-button type="text" @click.native="num=2" v-else>收起</el-button>
          </div>
        </div>
      </div>

      <SongList
        title="歌曲列表"
        :songNum="songs.length"
        :songs="songs"
      />

      <Comment :id="$route.query.id" :type="3"/>
    </div>

    <div class="left_wrap">
      <h4>Ta的其他热门专辑</h4>
      <ul>
        <li v-for="item in otherAlbum" :key="item.id" @click="toAlbumDetail(item.id)">
          <div style="width: 50px;">
            <el-image :src="`${item.picUrl}?param=50y50`"/>
          </div>
          <div>
            <p>{{ item.name }}</p>
            <p>{{ dayjs(item.publishTime).format('YYYY-MM-DD') }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入dayjs格式化时间
import dayjs from "dayjs";

export default {
  name: "AlbumDetail",
  data() {
    return {
      albumInfo: {},
      songs: [],
      num: 2, // 歌单介绍的默认显示行数
      otherAlbum: []
    };
  },
  mounted() {
    // 获取歌单详细数据
    this.getData();
  },
  methods: {
    dayjs,
    changeMusiclist() {
      this.$bus.$emit("changeMusiclist", this.songs)
    },
    // 获取数据
    getData() {
      this.$API.albumDetail(this.$route.query.id).then((res) => {
        if (res.data.code === 200) {
          this.albumInfo = res.data.album;
          this.songs = res.data.songs

          // 获取5个该歌手其他专辑
          this.$API.artistAlbum(this.albumInfo.artist.id).then((res) => {
            if (res.data.code === 200) {
              this.otherAlbum = res.data.hotAlbums;
            }
          })
        }
      });
    },
    // 跳转到歌手详情页
    toArtist(id, name) {
      this.$router.push({
        path: "/artist",
        query: {
          id,
          name
        }
      })
    },
    // 跳转到专辑详情页
    toAlbumDetail(id) {
      this.$router.push({
        name: "albumdetail",
        query: {
          id
        }
      })
    }
  },
  computed: {
    listCreateTime() {
      return dayjs(this.albumInfo.publishTime).format("YYYY-MM-DD");
    },
    description() {
      // 处理歌单介绍换行
      return (this.albumInfo.description || "").split(/\n/g);
    },
  },
  watch:{
    // 监听路由变化,获取数据
    '$route'() {
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped>
#PlaylistDetail {
  display: flex;
  flex-flow: row nowrap;
  width: 1020px;
  margin: 0 auto;
  background-color: #fff;

  .content {
    width: 740px;
    padding: 40px;
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid #eeeeee;

    .title {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 20px;

      .title_imgbox {
        width: 208px;
        height: 208px;
        border: 1px solid rgb(180, 179, 179);
        padding: 3px;
      }

      .title_info {
        width: 100%;
        margin-left: 35px;
        display: flex;
        flex-flow: column nowrap;

        h3 {
          font-weight: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .creator {
          margin: 6px 0;
          display: flex;
          flex-flow: column nowrap;
          justify-content: start;
          align-items: start;

          span {
            margin: 5px 0;
            font-size: 12px;
            color: #999999;

            a {
              color: #0c73c2;
            }
          }
        }

        .dept {
          overflow: hidden;
        }

        div span,
        div p {
          color: #666666;
          font-size: 13px;
        }
      }

      .title_info > div {
        margin: 5px 0;
      }
    }
  }

  .left_wrap {
    flex: 1;
    padding: 30px;
    width: 280px;

    h4 {
      border-bottom: 1px solid #999999;
      padding-bottom: 5px;
    }


    ul li {
      display: flex;
      flex-flow: row nowrap;
      justify-content: start;
      cursor: pointer;

      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 3px;
      }

      p {
        font-size: 14px;
      }
    }

  }
}
</style>